<template>
	<view class="top-serach-full-panel">
		<view class="time-search-panel">
			<view class="search-bar">
				<view class="search-label">时间</view>
				<view class="search-content">
					<!-- <input v-model="query.start" class="ipt text-center" maxlength="50" readonly /> -->
					<picker mode="date" class="ipt text-center" data-value="query.start" start="1970-01-01" :end="query.end?query.end:'2030-01-01'" @change="(res)=>dateChange(res,'start')">
					    <view class="picker">{{ query.start}}</view>
					</picker>
					<text style="padding: 0upx 20upx;font-size: 26upx;">到</text>
					<!-- <input v-model="query.end" class="ipt text-center" maxlength="50" readonly/> -->
					<picker mode="date" class="ipt text-center" data-value="query.end" :start="query.start?query.start:'1970-01-01'" end="2030-01-01" @change="(res)=>dateChange(res,'end')">
					    <view class="picker">{{ query.end}}</view>
					</picker>
				</view>
			</view>
			<view class="search-bar">
				<view class="search-label">{{labelText}}</view>
				<view class="search-content">
					<input v-model="query.queryStr" class="ipt" maxlength="50"/>
				</view>
			</view>
			<view class="search-btn-panel">
				<view class="search-btn" @click="handleSearch">查询</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	
	export default {
		components: {uniIcons},
		props:{
			labelText: {
				type: String,
				default: '排口'
			}
		},
		filters:{
			
		},
		data() {
			return {
				query: {
					queryStr: '',
					start: '',
					end: ''
				}
				
			}
		},
		methods: {
			dateChange(res,type){
				 this.query[type] = res.detail.value
				// 
				console.log(res,type)
			},
			handleSearch(){
				this.$emit('onSearch',this.queryStr)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-serach-full-panel{
		width: 100%;
		background-color: #f1f1f1;
		z-index: 1;
	}
		 
	.time-search-panel{
		position: relative;
		width: 690upx;
		top: 20upx;
		// position: fixed;
		// top: 110upx;
		// z-index: 1;
		left: 30upx;
		padding: 20upx 0upx;
		border-radius: 10upx;
		box-sizing: border-box;
		background-color: #fff;
		 .search-btn-panel{
			 text-align: right;
			 padding-right: 20upx;
			 padding-top: 10upx;
			 .search-btn{
				display: inline-block;
			 	width: 120upx;
				height: 50upx;
				line-height: 50upx;
				border-radius: 10upx;
			 	text-align: center;
				font-size: 24upx;
			 	color: #fff;
				background-color: #156dac;
			 }
		}
		.search-bar{
			display: flex;
			align-items: center;
			height: 80upx;
			.search-label{
				flex: 0 0 120upx;
				text-align: center;
				color: #868686;
				font-size: 26upx;
			}
			.search-content{
				flex: 1;
				border-radius: 20upx;
				height: 60upx;
				line-height: 60upx;
				display: flex;
				align-items: center;
				padding: 0upx 20upx;
				.ipt{
					background: #f5f5f5;
					padding-left: 10upx;
					flex:1;
					height: 60upx;
					line-height: 60upx;
					font-size: 26upx;
					.picker{
						height: 60upx;
						line-height: 60upx;
					}
				}
			}
			
		}
	}
</style>
